﻿<!DOCTYPE html>

<html lang="zh">
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>@ViewData["Title"]</title>
	<environment include="Development">
		<link rel="stylesheet" href="~/lib/layui/css/layui.css">
		<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css"/>
	</environment>
	<environment exclude="Development">
		<link rel="stylesheet" href="~/lib/layui/css/layui.css">
		<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css"/>
	</environment>
	<style>
		:root {
			--default-active-top: 136px;
		}
		
		.nav-item .nav-link
		{
			color: #000;
		}

		.nav-item .nav-link:hover
		{
			background-color: #eee;
		}

		.nav-item.active
		{
			background-color: #eee;
			font-weight: 600;
		}

		.nav-item.active::after {
			content: '';
			width: 4px;
			position: absolute;
			left: -4px;
			top: var(--default-active-top);
			background-color: #007bff;
			height: 40px;
			transition: top 0.2s ease; /* 添加过渡效果 */
		}
	</style>
</head>
<body>
@* TODO：头 *@
@{ await Html.RenderPartialAsync("Partial_TopBar"); }

@* TODO：主体 *@
<main class="container-lg mt-4">
	<section class="row">
		<div class="col-3">
			@* 侧边导航 *@
			@* @{ await Html.RenderPartialAsync("Partial_SideBar"); } *@
			<nav class="position-sticky">
				<div class="d-flex align-items-center p-3">
					@* 头像 *@
					<div>
						<img src="https://ui-avatars.com/api/?name=2@qq.com&background=0D8ABC" alt="" class="rounded-circle"/>
					</div>
					@* 信息 *@
					<div class="ms-3">
						<div>HardStyle</div>
						<div>(827778732@qq.com)</div>
					</div>
				</div>
				<ul class="nav flex-column">
					<li class="nav-item">
						<a class="nav-link d-flex align-items-center" asp-controller="Manage" asp-action="AccountManage">
							<img src="~/images/icon_账户.svg" alt="">
							<span class="ms-1">账号管理</span>
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link d-flex align-items-center" asp-controller="Manage" asp-action="ManageLogins">
							<img src="~/images/icon_外部账户.svg" alt="">
							<span class="ms-1">外部账号关联</span>
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link d-flex align-items-center" asp-controller="Manage" asp-action="ManageProfile">
							<img src="~/images/icon_个人资料.svg" alt="">
							<span class="ms-1">个人资料</span>
						</a>
					</li>

					<li class="nav-item">
						<a class="nav-link d-flex align-items-center" asp-controller="Manage" asp-action="ApplicationManage">
							<img src="~/images/icon_应用管理.svg" alt="">
							<span class="ms-1">应用管理</span>
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link d-flex align-items-center" asp-controller="Manage" asp-action="LoginHistory">
							<img src="~/images/icon_历史.svg" alt="">
							<span class="ms-1">登录历史</span>
						</a>
					</li>
				</ul>
			</nav>
		</div>
		<div class="col-9">
			@* 内容区域 *@
			@RenderBody()
		</div>
	</section>
</main>

@* TODO：脚 *@
<footer>

</footer>

<environment include="Development">
	<script src="~/lib/jquery/jquery-3.7.1.js"></script>
	<script src="~/lib/layui/layui.js"></script>
	<script src="~/lib/bootstrap/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
	<script src="~/lib/jquery/jquery-3.7.1.min.js"></script>
	<script src="~/lib/layui/layui.js"></script>
	<script src="~/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
</environment>
@* 提供一个占位符用于按需的渲染额外的脚本 *@
@await RenderSectionAsync("Scripts", required: false)
<script>
	(function($){
		'use strict'
		
		const LINE_CSS_VAR = "--default-active-top"
		const DEFAULT_TOP = 136
		const lis = $('.nav li')

		function setLineCssVar(val){
			document.documentElement.style
				.setProperty(LINE_CSS_VAR, DEFAULT_TOP + val + 'px')
		}

		function changeActiveNavItem(url){
			//根据url获取指定的li元素		
			const li =  $('.nav li a').filter(function (){
				const pathname = new URL(this.href).pathname
				return url.includes(pathname)
			}).parent()

			//清除所有的active状态
			lis.removeClass('active')
			//设置当前li为活跃元素
			li.addClass('active')
			//设置垂直线位置
			setLineCssVar( (li.index()-1) * 40 )
		}

		//鼠标移入li元素
		lis.on('mouseover',function (){
			setLineCssVar( ($(this).index()-1) * 40 )
		})

		//鼠标移出li元素
		lis.on('mouseout',function (){
			const navItemActive = $('.nav .nav-item.active').index();
			setLineCssVar( (navItemActive-1) * 40 )
		})

		changeActiveNavItem(window.location.href)
	})(jQuery)
</script>
<script>
	//需要引入layui
	//吐司
	function showToast(msg) {
		layer.msg(msg)
	}

	//成功提示框
	function successAlert(msg, time = 2000) {
		layer.alert(msg, {
			icon: 1, time: time, offset: 't', closeBtn: 0, title: '成功', btn: [], anim: 2, shade: 0
		})
	}

	//警告提示框
	function waringAlert(msg, time = 2000) {
		layer.alert(msg, {
			icon: 3, time: time, offset: 't', closeBtn: 0, title: '成功', btn: [], anim: 2, shade: 0
		})
	}

	//错误提示框
	function errorAlert(msg, time = 2000) {
		layer.alert(msg, {
			icon: 5, time: time, offset: 't', closeBtn: 0, title: '错误信息', btn: [], anim: 2, shade: 0
		})
	}

</script>
@* 提醒 *@
@if (AlertModel.TryGet(TempData, out var alertModel)&& alertModel != null)
{
	switch (alertModel.Type)
	{
		case AlertType.Toast:
			<script>
	showToast('@alertModel.Message');
</script>
			break;
		case AlertType.Success:
			<script>
	successAlert('@alertModel.Message', @alertModel.Duration);
</script>
			break;
		case AlertType.Warning:
			<script>
	waringAlert('@alertModel.Message', @alertModel.Duration);
</script>
			break;
		case AlertType.Error:
			<script>
	errorAlert('@alertModel.Message', @alertModel.Duration);
</script>
			break;
	}
}

@* 动作 *@
@if (ActionModel.TryGet(TempData, out var actionModel)&& actionModel != null)
{
	switch (actionModel.Type)
	{
		case ActionType.Redirect:
			<script>
	setTimeout(function () {
		window.location.replace('@actionModel.Url')
	}, @actionModel.Delay)
</script>
			break;
	}
}
</body>
</html>
